<template>
	<view>
		<view style="background-color: #FFFFFF;">
			<cu-custom :isBack="true">
				<block slot="backText"></block>
				<block slot="content">{{corpCode}}-采购上架</block>
			</cu-custom>
		</view>
		<view class="cu-bar bg-white search fixed indexes" :style="[{top:CustomBar + 'px'}]">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @confirm="sub" v-model="asnId" type="text" placeholder="输入搜索的关键词" focus></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-gradual-green shadow-blur round" @click="clerInv">清空</button>
			</view>
			<view class="action" @click="toScan">
				<text class="cuIcon-scan" style="font-size: 56rpx;"></text>
			</view>
		</view>
		<view style="font-size: 16px; background-color: #fff;height: 100%;margin-top: 10%;">
			<view class="solids-bottom" style="height: 50%;">
				<view class="flex-sub text-center solid-bottom text-xl padding">
					<text class="text-black text-bold">货位信息</text>
				</view>
				<view class="padding">
					<text>货位名称：{{hwname}}</text>
				</view>
			</view>
			<view style="height: 50%;">
				<view class="flex-sub text-center solid-bottom text-xl padding">
					<text class="text-black text-bold">产品信息</text>
				</view>
				<uni-swipe-action>
					<uni-swipe-action-item v-for="(item, index) in invs" :right-options="options1" :key="item.index" @click="swipeClick($event, index)">
						<view class="content padding">
							<view class="action" style="float: right;">
								<button class="cu-btn bg-gradual-green shadow-blur round" @tap="showModal" data-target="DrawerModalR">推荐货位</button>
							</view>
							<view>
								<text class="text-blue margin-right-xs"></text> 产品名称：{{item.cinvname}}
							</view>
							<view class="text-gray cu-form-group" style="padding: 15px 0px 0px 0px;">
								<text class=" margin-right-xs" style="color: red;font-weight: 1000;">上架数量：</text>
								<input placeholder="0" name="input" @input="onInput" type="number" v-model="item.prtqty"></input>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
			<view class="action-section">
				<button type="primary" class="no-border confirm-btn" :disabled="isReC" @click="createOrder">上架</button>
			</view>
		</view>
		<view class="cu-modal drawer-modal justify-end" :class="modalName=='DrawerModalR'?'show':''" @tap="hideModal">
			<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)',width:'80%'}]">
				<view>
					<view v-if="cHList.length<1" class="nodata">暂无数据</view>
					<view class="cu-list menu"  v-for="(item,index) in cHList" :key="index">
						<view class="cu-item" >
							<view class="content padding-tb-sm">
								
								<view class="text-black text-sm view-s"  style="text-align: left;">仓库：<text  class="t-text"  style="float: right;"> {{item.cwhname}}</text></view>
								<view class="text-black text-sm view-s"  style="text-align: left;">货位：<text  class="t-text" > {{item.cposname}}</text></view>
								<view class="text-black text-sm view-s"  style="text-align: left;">数量：<text  class="t-text" > {{item.iquanttity}}</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				options1: [{
					text: '删除'
				}],
				CustomBar: this.CustomBar, //滚动定位用
				modalName:null,
				cHList:[],
				asnId:'',
				hwname:"",
				hwcode:"",
				invs:[],
				invcode:'',
				poid:'',
				picArray:[],
				cbarcode:'',
				isReC:false,
				maySjNum:'',//可上架数量
				sjNum:'1',//本次上架数量
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'auditlist', 'corpCode']),
		},
		onLoad() {
			// this.asnId = 'hw_105_01001';
			// this.sub();
			// this.asnId = 'dh_102_1000008859_4_1';
			// this.sub();
			// this.asnId = 'jy_102_GG202011210001_2_1';
			// this.sub();
		},
		methods: {
			
			/** 扫发出声音*/
			makeSound(name){
				console.log("=====testClick=====");
				let src = '../../static/'+name+'.mp3';
				//实例化声音  
				const Audio = uni.createInnerAudioContext();
				Audio.autoplay = true;
				Audio.src = src; //音频地址  
				Audio.play(); //执行播放  
				Audio.onError((res) => {
				});
				Audio.onPause(function() {
					console.log('end');
					Audio.destroy();
				});
			},
			
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
				this.findHWData();
			},
			hideModal(e) {
				this.modalName = null
			},
			findHWData(){
				let cinvcode=this.invs[0].viewCode;
				if(cinvcode == undefined || cinvcode == ''){
					return;
				}
				uni.request({
					url:this.serverURL_a+'/wh/u8/u8InvpositionSum/sumListData?__ajax=json',
					data:{
						cinvcode : cinvcode,
						"orderBy":"cbatch desc",
						__sid:this.userInfo.sessionid
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
					},
					method: 'POST',
					success:function(data){
						let ret = data.data;
						if(data.statusCode!="200"){
							uni.showModal({
								content: ret.message,
								showCancel:false,
							});
							
							return;
						}
						this.cHList=data.data;
						
					}.bind(this),
					fail:function(){
						this.$api.msg('服务已停止,请稍后再试');
						
						return;
					}.bind(this),
				});
			},
			hasLogins(){
				if(!this.hasLogin){
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return;
				} 
			},
			onInput(e){
					    this.sjNum = e.target.value
			},
			sub(){
				this.hasLogins();
				let id = this.asnId;
				setTimeout(function(){
					if(id.indexOf("hw") > -1){
						uni.request({
								url:this.serverURL_a+'/so/App/getHw',
								data:{
									hw : this.asnId,
									__sid:this.userInfo.sessionid
								},
								header: {
									'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
								},
								method: 'POST',
								success:function(data){
									this.asnId = '';
									var requrt = data.data;
									if(requrt.code == '1001'){
										var hwdata = requrt.resMap;
										this.hwcode=hwdata.cposcode;
										this.hwname=hwdata.cposname;
									}else{
										uni.showModal({
										    content: requrt.msg,
											showCancel:false,
										});
										return;
									}
								}.bind(this),
								fail:function(){
									this.$api.msg('服务已停止,请稍后再试');
									return;
								}.bind(this),
							});
						return;
					}
					if(!id){
						this.asnId = '';
						this.$api.msg('请扫描正确的条码!');
					}else{
						this.invcode = id;
						this.asnId = '';
						this.addinv();
					}
					// if(id.indexOf("dh") > -1 || id.indexOf("po") > -1){
					// 	this.invcode = id;
					// 	this.asnId = '';
					// 	this.addinv();
					// }else{
					// 	this.asnId = '';
					// 	this.$api.msg('请扫描正确的条码!');
					// }
					if(this.hwcode == ''){
						uni.showModal({
						    content: "请扫描货位条码！",
							showCancel:false,
						});
						return;
					}
				}.bind(this),200);
			},
			addinv(){
				this.hasLogins();
				// var url = this.serverURL_a+'/order/App/findPoInv';
				var url = this.serverURL_a+'/barcode/decode/getInvInfo';
				
				var invs = this.invs;
				uni.request({
					url:url,
					data:{
						// invLable:this.invcode,
						__sid:this.userInfo.sessionid,
						barCode: this.invcode,
						bneedStore: '0',
						bmustAcct:'1',
						barType:'3'
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
					},
					method: 'POST',
					success:function(data){
						var cinvs =  data.data;
						if(cinvs.result=="false"){
							uni.showModal({
							  content: cinvs.message,
							  showCancel:false,
							})
							return false;
						}
						var invs = this.invs;
						var inv = cinvs.data.basInv;
						if(this.invs.length < 1){
							inv.prtqty = 1;
							this.invs.push(inv);
						}else{
							var j=0;
							for(;j<invs.length;j++){
								if(inv.cinvcode == invs[j].cinvcode){
									invs[j].prtqty = invs[j].prtqty + 1;
									break;
								}
							}
							if(j>=invs.length){
								inv.prtqty = 1;
								this.invs.push(inv);
							}
						}
						// this.cbarcode = this.invcode;
						this.cbarcode = cinvs.data.bizKey;
						
						// var cinvs =  data.data;
						// if(cinvs.code == '1001'){
						// 	var invs = this.invs;
						// 	var inv = cinvs.resMap;
						// 	if(this.invs.length < 1){
						// 		inv.prtqty = 1;
						// 		this.invs.push(inv);
						// 	}else{
						// 		var j=0;
						// 		for(;j<invs.length;j++){
						// 			if(inv.cinvcode == invs[j].cinvcode){
						// 				invs[j].prtqty = invs[j].prtqty + 1;
						// 				break;
						// 			}
						// 		}
						// 		if(j>=invs.length){
						// 			inv.prtqty = 1;
						// 			this.invs.push(inv);
						// 		}
						// 	}
						// 	this.cbarcode = this.invcode;
							
						// }else{
						// 	uni.showModal({
						// 	    content: cinvs.msg,
						// 		showCancel:false,
						// 	});
							
						// 	return;
						// }
					}.bind(this),
					fail: function() {
						this.$api.msg('无法连接服务，请联系管理');
						this.isReC = false;
						return;
					}.bind(this)
				})
			},
			createOrder(){
				this.hasLogins();
				let hw = this.hwcode;
				let inv = JSON.stringify(this.invs);
				if(inv == undefined || inv == ''|| hw == ''){
					this.$api.msg('请扫描产品条码或货位条码！');
					this.makeSound("sb");
					return;
				}
				if(this.isReC){
					this.$api.msg('请不要重复提交！');
					this.makeSound("sb");
					return;
				}
				this.isReC = true;
				uni.showModal({
					//content: '是否提交!\r\n当前上架数量：'+this.sjNum+';可上架数量:'+this.maySjNum,
					content: '是否提交!\r\n当前上架数量：'+this.sjNum,
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
							    title: '数据提交中',
								 mask:true
							});
							uni.request({
								url:this.serverURL_a + '/order/App/addPds?__ajax=json',
								data:{
									hw : hw,
									cinvcode: inv,
									cbarcode:this.cbarcode,
									__sid:this.userInfo.sessionid
								},
								header: {
									'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
								},
								method: 'POST',
								success:function(data){
									uni.hideLoading();
									this.isReC = false;
									var request = data.data;
									if(data.statusCode!="200"){
										uni.showModal({
										    content: request.message,
											showCancel:false,
										});
										this.makeSound("sb");
										return;
									}
									if(request.result=="false"){
										uni.showModal({
										    content: request.message,
											showCancel:false,
										});
										this.makeSound("sb");
										return;
									}else{
										this.invs = [];
										this.$api.msg('提交成功!');
										this.makeSound("cg");
										return;
									}
								}.bind(this),
								fail:function() {
									this.$api.msg('无法连接服务，请联系管理');
									this.isReC = false;
									return;
								}.bind(this)
							})
						}else if (res.cancel) {
							this.isReC = false;
							return
						}
					}.bind(this)
				});
			},
			clerInv(){
				uni.showModal({
					content: "是否清空所有存货信息!",
					success: function(res) {
						if (res.confirm) {
							this.invs = [];
						}else if (res.cancel) {
						return
						}
					}.bind(this)
				});
				
			},
			toScan() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						var rdata = res.result;
						this.asnId = rdata;
						setTimeout(function(){
							this.sub();
						}.bind(this),100);
						
					}.bind(this)
				});
			},
			toBox(index){
				this.invs.splice(index, 1);
			},
			swipeClick(e, index) {
				let {
					content
				} = e;
				if (content.text === '删除') {
					uni.showModal({
						title: '提示',
						content: '是否删除',
						success: res => {
							if (res.confirm) {
								this.invs.splice(index, 1);
							} 
						}
					});
				} else {
					uni.showToast({
						title: `点击了${e.content.text}按钮`,
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style>

.indexes {
		position: relative;
	}
/* 底部栏 */
.action-section{
	/* #ifdef H5 */
	/* #endif */
	position:fixed;
	left: 75%;
	bottom:30upx;
	z-index: 95;
	display: flex;
	align-items: center;
	background: rgba(255,255,255,.9);
	border-radius: 40upx;
	.checkbox{
		height:52upx;
		position:relative;
		image{
			width: 52upx;
			height: 100%;
			position:relative;
			z-index: 5;
		}
	}
	.clear-btn{
		position:absolute;
		left: 26upx;
		top: 0;
		z-index: 4;
		width: 0;
		height: 52upx;
		line-height: 52upx;
		padding-left: 38upx;
		font-size: $font-base;
		color: #fff;
		background: $font-color-disabled;
		border-radius:0 50px 50px 0;
		opacity: 0;
		transition: .2s;
		&.show{
			opacity: 1;
			width: 120upx;
		}
	}
	.total-box{
		flex: 1;
		display:flex;
		flex-direction: column;
		text-align:right;
		padding-right: 40upx;
		.price{
			font-size: $font-lg;
			color: $font-color-dark;
		}
		.coupon{
			font-size: $font-sm;
			color: $font-color-light;
			text{
				color: $font-color-dark;
			}
		}
	}
	.confirm-btn{
		padding: 0 38upx;
		margin: 0;
		border-radius: 100px;
		height: 76upx;
		line-height: 76upx;
		font-size: $font-base + 2upx;
		background: $uni-color-primary;
	}
}
</style>
